<template>
  <div>
      <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 搜索表单 -->
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="电影名称">
        <el-input 
          @keyup.native.enter="submit"
          v-model="name" 
          placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">电影列表</el-divider>

    <!-- 电影列表 -->
    <el-table :data="movieData.result">
        <el-table-column label="电影封面" prop="cover" width="120px" align="center">
          <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="80px">
          </template>
        </el-table-column>
        <el-table-column label="电影名称" prop="title"></el-table-column>
        <el-table-column label="主演" prop="star_actor"></el-table-column>
        <el-table-column label="上映时间" prop="showingon"></el-table-column>
        <el-table-column label="时长" prop="duration">
         <template slot-scope="scope">{{scope.row.duration}} 分钟</template>
        </el-table-column>
        <el-table-column label="所属类别" prop="type">
          <template slot-scope="scope">       
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" type="success">{{ scope.row.type }}</el-tag>
          </div>
      </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <el-button type="info" icon="el-icon-message" circle></el-button>
          <el-button
           @click="$router.push('/home/movie-update/'+scope.row.id)"
            type="warning" icon="el-icon-star-off" circle></el-button>
          <el-button
          @click="deleteItem(scope.row)"
           type="danger"
            icon="el-icon-delete" circle>
          </el-button>
          </template>
          
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination 
        style="margin:10px;"
        background
        :total="movieData.total" 
        :page-size="movieData.pagesize" 
        :current-page="movieData.page"
        layout="->, total, prev, pager, next, jumper"
         @current-change="changeCurrentPage"
        >
       
    </el-pagination>

  </div>
</template>

<script>
import httpApi from '@/http/index.js'
export default {
    data() {
        return {
            name: '',       //保存查询关键字
            movieData:{      // 保存电影数据
              page:1,         // 当前页码
              pagesize:2,    // 每页多少条
              total:100,      // 总条目数
              result:[]       // 电影列表
            }
        }
    },
    methods: {
      /**删除列表项 */
      deleteItem(movie){
        console.log('点击了删除',movie)
        this.$confirm('此操作将永久删除电影, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           httpApi.movieApi.delete({id:movie.id}).then(res=>{
          console.log('删除了',res)
          if(res.data.code==200){
            this.search()
          }
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
      submit(){
        this.movieData.page=1  // 将页码重置为一
        this.search()
      },
      /**显现模糊查询业务 */
        search() {
          if(this.name.trim()){ // 有关键词
            this.queryMoviesByName()
          }else{ // 没有关键词
            this.queryMovies()
          }
        },

        // 改变当前页  分页器当前页码改变时执行
        changeCurrentPage(page){
          this.movieData.page=page  // 修改当前页
          this.search()        // 重新加载当前电影列表
        },
        // 模糊查询
        queryMoviesByName(){
          let params ={
            name:this.name,
           page:this.movieData.page,
            pagesize:this.movieData.pagesize
            }
          httpApi.movieApi.queryByNameLike(params).then(res=>[
            console.log(res),
            this.movieData=res.data.data
          ])
        },
        // 查询电影列表：根据当前页码，发送请求，加载电影列表数据
        queryMovies(){
          let params={
            page:this.movieData.page,
            pagesize:this.movieData.pagesize
          }
          httpApi.movieApi.queryAll(params).then(res=>{
            console.log('首页电影列表数据',res)
            this.movieData=res.data.data
          })
        },
        // 初始化电影列表数据
        init(){
          let params={page:1,pagesize:2}
        httpApi.movieApi.queryAll(params).then(res=>{
          console.log('首页电影数据',res)
          this.movieData.result=res.data.data.result
        })
        }
    },
     // 组件挂载完毕后执行
    mounted(){
      // 电影列表初始化数据
      this.init()
    }
};
</script>

<style lang="scss" scoped>
</style>